<template>
  <v-chart
    :forceFit="true"
    :height="height"
    :data="data"
    :padding="[20, 20, 95, 20]"
    :scale="scale"
  >
    <v-tooltip></v-tooltip>
    <v-axis
      :dataKey="axis1Opts.dataKey"
      :line="axis1Opts.line"
      :tickLine="axis1Opts.tickLine"
      :grid="axis1Opts.grid"
    />
    <v-axis
      :dataKey="axis2Opts.dataKey"
      :line="axis2Opts.line"
      :tickLine="axis2Opts.tickLine"
      :grid="axis2Opts.grid"
    />
    <v-legend data-key="user" marker="circle" :offset="30" />
    <v-coord type="polar" radius="0.8" />
    <v-line position="item*score" color="user" :size="2" />
    <v-point position="item*score" color="user" :size="4" shape="circle" />
  </v-chart>
</template>

<script>
const axis1Opts = {
  dataKey: "item",
  line: null,
  tickLine: null,
  grid: {
    lineStyle: {
      lineDash: null
    },
    hideFirstLine: false
  }
};
const axis2Opts = {
  dataKey: "score",
  line: null,
  tickLine: null,
  grid: {
    type: "polygon",
    lineStyle: {
      lineDash: null
    }
  }
};

const scale = [
  {
    dataKey: "score",
    min: 0,
    max: 100
  },
  {
    dataKey: "user",
    alias: "类型"
  }
];

const sourceData = [
  { item: "影响力", score: 70 },
  { item: "执行力", score: 80 },
  { item: "学习力", score: 67 },
  { item: "管理力", score: 73 },
  { item: "协作力", score: 90 }
];

export default {
  name: "Radar",
  props: {
    height: {
      type: Number,
      default: 254
    },
    dataSource: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      axis1Opts,
      axis2Opts,
      scale,
      data: sourceData
    };
  },
  watch: {
    dataSource(newVal) {
      if (newVal.length === 0) {
        this.data = sourceData;
      } else {
        this.data = newVal;
      }
    }
  }
};
</script>

<style scoped>
</style>